<template>
  <div class="language-switcher">
    <a-dropdown :trigger="['click']" placement="bottomRight">
      <a class="ant-dropdown-link">
        <img src="../assets/i18n.svg" alt="Language" class="language-icon" />
        <!-- <span class="current-language">{{ currentLanguage }}</span> -->
      </a>
      <template #overlay>
        <a-menu @click="handleMenuClick">
          <a-menu-item v-for="lang in languages" :key="lang.code">
            {{ lang.name }}
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useHidStore } from '../stores/useHidStore'
const hidStore = useHidStore()
const languages = [
  { code: 'zh', name: '中文' },
  { code: 'en', name: 'English' }
]
const handleMenuClick = (menuInfo) => {
  hidStore.setCurrentLanguage(menuInfo.key)
  const currentWebview = document.querySelector('webview')
  if (currentWebview) {
    const lang = menuInfo.key
    console.log('lang===:',lang)
    currentWebview.executeJavaScript(`
      window.winSwitchLanguage(${JSON.stringify(lang)})
    `)
  }
}
</script>

<style scoped>
.language-switcher {
  display: inline-block;
}

.ant-dropdown-link {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: white;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
  gap: 8px;
}

.language-icon {
  width: 20px;
  height: 20px;
}

.current-language {
  font-size: 14px;
  font-weight: 500;
}
</style>
